// 引导页
import { useState } from 'react';  
import '../css/GuidePage.css'; // 引入样式文件  
import { useNavigate } from 'react-router-dom';

const GuidePage = () => {  
    let navigate = useNavigate()
  const [currentPage, setCurrentPage] = useState(0);  
  
  const pages = [  
    {  
      title: "发现家居新宠",  
      content: "探索我们的家具平台，带您发现新颖时尚的家居设计，为您的家居空间注入新的灵感和活力",  
      backgroundImage: "url('https://cdn7.axureshop.com/demo2024/2301921/images/%E5%BC%95%E5%AF%BC%E9%A1%B51/u77.png')",  // 替换为你的背景图路径  
    },  
    {  
      title: "打造理想家居",  
      content: "从我们的家具商城中选择精心挑选的家具，为您营造一个完美的居家环境，让您的家成为舒适而优雅的天堂",  
      backgroundImage: "url('https://cdn7.axureshop.com/demo2024/2301921/images/%E5%BC%95%E5%AF%BC%E9%A1%B52/u133.png')",  // 替换为你的背景图路径  
    },  
    {  
      title: "家居装饰大集合",  
      content: "在我们的平台上浏览各式各样的家具和装饰品，为您的家带来独一无二的个性风格，让您的家成为您个人的艺术空间",  
      backgroundImage: "url('https://cdn7.axureshop.com/demo2024/2301921/images/%E5%BC%95%E5%AF%BC%E9%A1%B53/u189.png')",  // 替换为你的背景图路径  
    },  
  ];  

  const handleNext = () => {  
    if (currentPage < pages.length - 1) {  
      setCurrentPage(currentPage + 1);  
    }  
  };  

  const handlePrev = () => {  
    if (currentPage > 0) {  
      setCurrentPage(currentPage - 1);  
    }  
  };  

  const handleFinish = () => {  
    // 处理完成引导后的逻辑，比如跳转到主应用页面  
    navigate('/Login')
  };  

  return (  
    <div className="guide-page" style={{ backgroundImage: pages[currentPage].backgroundImage }}>  
      <div className="content">  
        <h1>{pages[currentPage].title}</h1>  
        <p style={{fontSize:"0.3rem"}}>{pages[currentPage].content}</p>  
        <div className="buttons">  
          <button onClick={handlePrev} disabled={currentPage === 0}>  
            上一页  
          </button>  
          {currentPage < pages.length - 1 ? (  
            <button onClick={handleNext}>下一页</button>  
          ) : (  
            <button onClick={handleFinish}>开始</button>  
          )}  
        </div>  
      </div>  
    </div>  
  );  
};  

export default GuidePage; 